<template>
    <a-drawer v-model:open="visible" class="custom-class" root-class-name="root-class-name" title="全局设置" placement="right">
        <a-typography-title :level="5">主题</a-typography-title>
        <a-radio-group v-model:value="theme" option-type="button"   :options="themeOptions" />
        <br/>
        <a-typography-title :level="5">主题色</a-typography-title>
        <div>
            <template v-for="color in presetColors">
                <span @click="themeConfig.token.colorPrimary = color"  :style="{ backgroundColor: color, 'user-select': 'none' }">
                    <CheckOutlined v-show="themeConfig.token.colorPrimary == color" />
                </span>
            </template>
        </div>
    </a-drawer>
</template>

<script lang="ts" setup name="">
    import { useVModel } from "@vueuse/core";
    import mainStore from "@/stores/main";
    import {CheckOutlined} from "@ant-design/icons-vue"
    const props = defineProps<{
        visible: boolean;
    }>();
    const emits = defineEmits(["update:visible"]);
    const visible = useVModel(props, "visible", emits);
    const {themeConfig,theme} = toRefs(mainStore());
    const presetColors = ["#3b82f6","#79aec8","#458f8f","#eb2f2f","#eb2f96","#e9a224","#3b5999"]
    const themeOptions = [
        {
            label: "白天",
            value: "light"
        },
        {
            label: "黑夜",
            value: "dark"
        },
    ]
</script>

<style scoped lang="scss">
    div{
        display:flex;
        padding:0 5px;
        span {
            margin: 0 4px;
            cursor: pointer;
            display:flex;
            width: 22px;
            height: 22px;
            border-radius: 4px;
            align-items: center;
            justify-content: center;
        }
    }
</style>
